<template>
  <div>
    <template>

    <v-alert
      class="alert"
      outlined
      type="success"
      text
      v-show="showAlert"
      transition="scroll-y-transition">
      {{alterMessage}}
    </v-alert>

    <v-row justify="center" v-show="dialog1">
      <v-dialog v-model="dialog1" persistent max-width="700px" >
          <v-card>
            <v-card-title>
              <span class="headline">编辑题目</span>
            </v-card-title>

        <v-container>
          <v-card-text>
        <v-row>

          <v-col cols="12" sm="6" md="4">
            <v-text-field label="题目描述" v-model="curAssignment.title">
            </v-text-field>
          </v-col>

          <v-col cols="12" sm="6" md="4">
          <v-select
            :items="assignmentTypeSelect"
            v-model="assignmentType"
            label="题目类型">
          </v-select>
          </v-col>

          <v-col cols="12" sm="6" md="4">
          <v-text-field  v-model="curAssignment.AOption" v-show="assignmentType===assignmentTypeSelect[0]" label="A选项">
          </v-text-field>
          </v-col>

          <v-col cols="12" sm="6" md="4">
            <v-text-field   v-model="curAssignment.BOption" v-show="assignmentType===assignmentTypeSelect[0]" label="B选项">
            </v-text-field>
          </v-col>

          <v-col cols="12" sm="6" md="4">
            <v-text-field    v-model="curAssignment.COption" v-show="assignmentType===assignmentTypeSelect[0]" label="C选项">
            </v-text-field>
          </v-col>

          <v-col cols="12" sm="6" md="4">
            <v-text-field   v-model="curAssignment.DOption" v-show="assignmentType===assignmentTypeSelect[0]" label="D选项">
            </v-text-field>
          </v-col>

          <v-col cols="12" sm="6" md="4">
            <v-text-field  v-model="curAssignment.answer" label="答案">
            </v-text-field>
          </v-col>

          <v-col cols="12" sm="6" md="4">
            <v-text-field  v-model="curAssignment.score" label="分值">
            </v-text-field>
          </v-col>
          <v-col cols="48" >
            <v-text-field  v-model="curAssignment.analyis" label="解析">
            </v-text-field>
          </v-col>

          <v-row>

          </v-row>

        </v-row></v-card-text> </v-container>

      <v-card-actions>
        <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="dialog1 = false;initCurAssignment()">
              Close
            </v-btn>
            <v-btn color="blue darken-1" text @click="handleEditSubmit">
              Save
            </v-btn>
            <v-btn color="blue darken-1" text @click="handleDeleteAssignment">
              delete
            </v-btn>
      </v-card-actions>
          </v-card>

      </v-dialog>
    </v-row>
    </template>

    <template>
      <v-row justify="center" v-show="dialog2">
        <v-dialog v-model="dialog2" persistent max-width="700px" >
          <v-card>
            <v-card-title>
              <span class="headline">创建题目</span>
            </v-card-title>

            <v-container>
              <v-card-text>
                <v-row>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field label="题目描述" v-model="curAssignment.title">
                    </v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-select
                      :items="assignmentTypeSelect"
                      v-model="assignmentType"
                      label="题目类型">
                    </v-select>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field  v-model="curAssignment.AOption" v-show="assignmentType===assignmentTypeSelect[0]" label="A选项">
                    </v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field   v-model="curAssignment.BOption" v-show="assignmentType===assignmentTypeSelect[0]" label="B选项">
                    </v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field    v-model="curAssignment.COption" v-show="assignmentType===assignmentTypeSelect[0]" label="C选项">
                    </v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field   v-model="curAssignment.DOption" v-show="assignmentType===assignmentTypeSelect[0]" label="D选项">
                    </v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field  v-model="curAssignment.answer" label="答案">
                    </v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field  v-model="curAssignment.score" label="分值">
                    </v-text-field>
                  </v-col>
                  <v-col cols="48" >
                    <v-text-field  v-model="curAssignment.analyis" label="解析">
                    </v-text-field>
                  </v-col>

                  <v-row>

                  </v-row>

                </v-row></v-card-text> </v-container>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="initCurAssignment();dialog2 = false">
                Close
              </v-btn>
              <v-btn color="blue darken-1" text @click="handleAddAssignment">
                Create
              </v-btn>

            </v-card-actions>
          </v-card>

        </v-dialog>
      </v-row>
    </template>




  <v-container>
  <v-container>
    <v-row>
    <v-banner>
      {{courseName}}的题目库

      <v-btn @click="dialog2=true" >
        <v-icon color="blue" large>
          mdi-plus
        </v-icon>
        新增
      </v-btn>
    </v-banner>

    </v-row>
  </v-container>
    <v-container v-for="item in assignmentslist" :key="item.id">
      <v-card >
        <v-row>
        <v-card-text class="assignmentText">
        {{item.title}}
        </v-card-text>
          <v-btn class="btn" @click="HandleDialog1(item.id)">
          <v-icon small>
            mdi-wrench
          </v-icon>
          详情
        </v-btn>
        </v-row>
      </v-card>
    </v-container>
  </v-container>
  </div>
</template>

<script>
import {getAssignments,addAssignment,editAssignment,deleteAssignment} from "../../api/assignment";



export default {
  name: "AssignmentEdit",
  data(){
    return {
      courseName : "",
      assignmentslist : [],
      courseId : 0,
      curAssignment:{
        id:0,
        title: "",
        AOption:"",
        BOption:"",
        COption:"",
        DOption:"",
        answer:"",
        score:0,
        analyis:"",
        type:0,
        courseId:this.courseId,
      },
      showAlert :false,
      dialog1:false,
      dialog2:false,
      assignmentType :"选择题",
      assignmentTypeSelect:["选择题","填空题","判断题"],
      alterMessage :"success",
  }
  },
  mounted() {
    this.courseId=window.localStorage.getItem('courseId');
    console.log(this.courseId);
    this.courseName=window.localStorage.getItem('courseName');
    getAssignments(this.courseId).then(
      res=>{
        console.log(res);
        this.assignmentslist=res;
        //this.curAssignment=this.assignmentslist[0];
        console.log(this.curAssignment)
      }
    )

  },
  methods :{
    fetchdata(){
      getAssignments(this.courseId).then(
        res=>{
          console.log(res);
          this.assignmentslist=res;
          //this.curAssignment=this.assignmentslist[0];
          console.log(this.curAssignment)
        }
      )
    },
    initCurAssignment(){
      this.curAssignment={
        id:0,
        title: "",
        AOption:"",
        BOption:"",
        COption:"",
        DOption:"",
        answer:"",
        score:0,
        analyis:"",
        type:0,
        courseId:this.courseId
      }
      this.assignmentType="选择题"
    },
    HandleDialog1(aid){
      for(let i=0;i<this.assignmentslist.length;i++)
          if(this.assignmentslist[i].id===aid)
          {this.curAssignment=this.assignmentslist[i];
          break;}
      this.assignmentType=this.assignmentTypeSelect[this.curAssignment.type];
      this.dialog1=true;
    },
    handleAddAssignment(){
      let i=0;
      for( i=0;i<this.assignmentTypeSelect.length;i++)
        if(this.assignmentTypeSelect[i]===this.assignmentType)
          break;
        this.curAssignment.type=i;
        this.curAssignment.courseId=this.courseId;
      addAssignment(this.curAssignment).then(
        res=>{
          if(res.code!=0){
            this.alterMessage="success"
            this.showAlert=true;
            setTimeout(() => {
              this.showAlert = false;
            }, 2000)
              console.log(res)
              this.initCurAssignment();
              this.dialog2=false;
              this.fetchdata();

          }
        }
      )
    },
    handleEditSubmit(){
        editAssignment(this.curAssignment).then(
          res=>{
            if(res.code!=0){
              this.alterMessage="修改成功"
              this.showAlert=true;
              setTimeout(() => {
                this.showAlert = false;
              }, 1000)
              this.initCurAssignment();
              this.dialog1=false;
              this.fetchdata();
          }}
        )
    },
    handleDeleteAssignment(){
      deleteAssignment(this.curAssignment.id).then(
        res=>{
          if(res.code!=0){
            this.alterMessage="删除成功"
            this.showAlert=true;
            setTimeout(() => {
              this.showAlert = false;
            }, 1000)
            this.initCurAssignment();
            this.dialog1=false;
            this.fetchdata();

          }
        }
      )
    }
  }
};
</script>

<style scoped>
.btn{
  position: absolute;
  left: 90%;
  top:50%;
  transform: translate(-50%,-50%);
}
.assignmentText{
  font-size: 25px;

}
.analyis{
  width: 100%;

}

</style>